<template>
    <view class="co-margin-bt">
        <view class="uni-padding-wrap">
            <view class="page-section">
                <view class="page-section-spacing">
                    <swiper class="swiperes" :indicator-dots="indicatorDots" :circular="true" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <!-- <swiper-item>
                            <view class="swiper-item uni-bg-red">A</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green">B</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">C</view>
                        </swiper-item> -->
                        <block v-for="(item,index) in imgUrls" :key="index">
                            <swiper-item>
                                <image :src="item.src"></image>
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,
            autoplay: false,
            interval: 2000,
            duration: 500,
            imgUrls: [
                {src:'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640'},
                {src: 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640'},
                {src: 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'}
            ],
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
    }
}
</script>

<style scoped>
.swiperes {
    width: 678rpx;
    margin: 0 auto;
    height: 100%;
}
.swiper-item {
    height: 100%;
}
image {
    width: 100%;
    height: 100%;
}
.uni-bg-red {
    background: red;
}
.uni-bg-green {
    background: green;
}
.uni-bg-blue {
    background: blue;
}
.page-section-spacing {
    height: 158upx;
}
</style>
